.root {
  position: relative;
}

.codeHighlight {
  position: relative;
  border-radius: var(--ch-radius, 0px);
  overflow: hidden;

  &:where([data-with-border]) {
    @mixin where-light {
      border: 1px solid var(--mantine-color-gray-2);
    }

    @mixin where-dark {
      border: 1px solid var(--mantine-color-dark-6);
    }

    &:where([data-code-color-scheme='dark']) {
      border: 1px solid var(--mantine-color-dark-6);
    }

    &:where([data-code-color-scheme='light']) {
      border: 1px solid var(--mantine-color-gray-2);
    }
  }

  @mixin where-light {
    --ch-background: var(--mantine-color-gray-0);
  }

  @mixin where-dark {
    --ch-background: var(--mantine-color-dark-8);
  }
}

.inlineCodeHighlight {
  border-radius: var(--ch-radius, var(--mantine-radius-sm));
  overflow: hidden;
  background-color: var(--ch-background);
  font-size: 13px;
  padding: 3px 5px;

  &:where([data-with-border]) {
    @mixin where-light {
      border: 1px solid var(--mantine-color-gray-2);
    }

    @mixin where-dark {
      border: 1px solid var(--mantine-color-dark-6);
    }

    &:where([data-code-color-scheme='dark']) {
      border: 1px solid var(--mantine-color-dark-6);
    }

    &:where([data-code-color-scheme='light']) {
      border: 1px solid var(--mantine-color-gray-2);
    }
  }

  @mixin where-light {
    --ch-background: var(--mantine-color-gray-0);
  }

  @mixin where-dark {
    --ch-background: var(--mantine-color-dark-8);
  }
}

.pre {
  --code-line-height: 1.7;

  display: block;
  margin: 0;

  &[data-with-offset] .code {
    padding-top: 50px;
  }
}

.code {
  display: block;
  padding: var(--mantine-spacing-xs) var(--mantine-spacing-md);
  background-color: var(--ch-background);
  font-size: 13px;
  line-height: var(--code-line-height, var(--mantine-line-height));
  font-family: var(--mantine-font-family-monospace);
  width: fit-content;
  min-width: 100%;

  &:where([data-inline]) {
    display: inline-block;
    padding: 3px 5px;
    background-color: var(--ch-background);
  }
}

.controls {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  background-color: var(--ch-background);
  border-bottom-left-radius: var(--mantine-radius-md);

  &:where([data-with-offset]) {
    top: 12px;
  }
}

.control {
  color: var(--mantine-color-text);
  opacity: 0.5;

  @mixin hover {
    color: var(--mantine-color-bright);
    opacity: 1;
  }

  &:where([data-code-color-scheme='dark']) {
    color: var(--mantine-color-dark-0);

    @mixin hover {
      color: var(--mantine-color-white);
    }
  }

  &:where([data-code-color-scheme='light']) {
    color: var(--mantine-color-black);

    @mixin hover {
      color: var(--mantine-color-black);
    }
  }

  & :where(svg) {
    width: 18px;
    height: 18px;
    display: block;
  }
}

.controlTooltip {
  &:where([data-code-color-scheme='light']) {
    background-color: var(--mantine-color-gray-9);
    color: var(--mantine-color-white);
  }

  &:where([data-code-color-scheme='dark']) {
    background-color: var(--mantine-color-gray-2);
    color: var(--mantine-color-black);
  }
}

.scrollarea {
  &[data-collapsed] {
    max-height: var(--ch-max-height, 180px);
    overflow: hidden;
    position: relative;

    &::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 80px;
      pointer-events: none;
      background: linear-gradient(
        0deg,
        var(--ch-background) 0%,
        var(--ch-background) 25%,
        transparent 100%
      );
      z-index: 1;
    }
  }
}

.showCodeButton {
  position: absolute;
  z-index: 2;
  bottom: 0;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  font-size: var(--mantine-font-size-sm);
  color: var(--mantine-color-anchor);
  width: 100%;
  text-align: center;
  padding-top: var(--mantine-spacing-xs);
  padding-bottom: var(--mantine-spacing-xs);
  white-space: nowrap;

  &[data-hidden] {
    display: none;
  }

  &:where([data-code-color-scheme='dark']) {
    color: var(--mantine-primary-color-5);
  }

  &:where([data-code-color-scheme='light']) {
    color: var(--mantine-primary-color-6);
  }
}

.file {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--mantine-font-size-xs);
  gap: 7px;
  padding: 5px 9px;
  font-family: var(--mantine-font-family-monospace);
  font-weight: 700;
  line-height: 1;
  user-select: none;
  cursor: pointer;
  opacity: 0.8;
  border: 1px solid transparent;
  white-space: nowrap;
  margin: 0;
  border-radius: var(--mantine-radius-default);

  &:where([data-active]) {
    opacity: 1;
  }

  @mixin where-light {
    border-color: var(--mantine-color-gray-3);
    color: var(--mantine-color-gray-8);

    &:where([data-active]) {
      background-color: var(--mantine-color-white);
      color: var(--mantine-color-black);
    }
  }

  @mixin where-dark {
    border-color: var(--mantine-color-dark-4);
    color: var(--mantine-color-dark-0);

    &:where([data-active]) {
      background-color: var(--mantine-color-dark-5);
      color: var(--mantine-color-white);
    }
  }

  &:where([data-color-scheme='light']) {
    border-color: var(--mantine-color-gray-3);
    color: var(--mantine-color-gray-8);

    &:where([data-active]) {
      background-color: var(--mantine-color-white);
      color: var(--mantine-color-black);
    }
  }

  &:where([data-color-scheme='dark']) {
    border-color: var(--mantine-color-dark-4);
    color: var(--mantine-color-dark-0);

    &:where([data-active]) {
      background-color: var(--mantine-color-dark-5);
      color: var(--mantine-color-white);
    }
  }

  @mixin hover {
    opacity: 1;
  }

  &:where(:only-child) {
    cursor: default;
  }
}

.fileIcon {
  & :where(svg) {
    display: block;
  }
}

.filesScrollarea {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  right: 70px;
}

.files {
  display: flex;
  padding: 12px 10px;
  padding-bottom: 0;
  gap: var(--mantine-spacing-xs);
}
